<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>常用节点类型</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid #ccc;
            padding: 10px;
        }

        section {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1 title="常用节点类型">常用节点类型实例</h1>
    <section>
        <h1>Node 接口介绍</h1>
    </section>
    <section>
        <h1>Element 类型</h1>
        <ul>
            <li>HTML 元素</li>
            <li id="attr" title="属性" data-custom="demo">属性</li>
            <li>创建 / 删除元素</li>
        </ul>
    </section>
    <section>
        <h1>Text 类型</h1>
        <ul>
            <li>data 和 nodeValue</li>
            <li>创建文本节点</li>
        </ul>
    </section>
    <section>
        <h1>Document 类型</h1>
        <ul>
            <li>不是 html 元素</li>
            <li>挂靠各种常用的 api</li>
        </ul>
    </section>
    <section>
        <h1>汇总</h1>
        <table>
            <thead>
                <tr>
                    <th>类型</th>
                    <th>常量</th>
                    <th>nodeType</th>
                    <th>nodeName</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Element 类型</td>
                    <td>ELEMENT_NODE</td>
                    <td>1</td>
                    <td>元素的标签名</td>
                </tr>
                <tr>
                    <td>Text 类型</td>
                    <td>TEXT_NODE</td>
                    <td>3</td>
                    <td>#text</td>
                </tr>
                <tr>
                    <td>Document 类型</td>
                    <td>DOCUMENT_NODE</td>
                    <td>9</td>
                    <td>#document</td>
                </tr>
                <tr>
                    <td>DocumentFragment 类型</td>
                    <td>DOCUMENT_FRAGMENT_NODE</td>
                    <td>11</td>
                    <td>#document-fragment</td>
                </tr>
            </tbody>
        </table>
    </section>
</body>
</html>